<template>
    <div class="LoginForm">
        <div class="System_name">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>
        <div>欢迎来到求职系统</div>
        <div class="LoginInput">
            <!-- <el-input placeholder="账号" prefix-icon="el-icon-user" v-model="input_account"
                class="el-message-input"></el-input>
            <el-input placeholder="密码" prefix-icon="el-icon-lock" v-model="input_password"
                class="el-message-input"></el-input>
            <el-select v-model="status_code" placeholder="请选择" class="el-message-select">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> -->
            <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                <el-form-item label="账号" prop="input_account" class="el-message-input">
                    <el-input placeholder="账号" prefix-icon="el-icon-user" v-model="form.input_account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="input_password" class="el-message-input">
                    <el-input placeholder="密码" prefix-icon="el-icon-lock" v-model="form.input_password"
                        show-password></el-input>
                </el-form-item>
                <el-form-item label="请选择" class="el-message-select">
                    <el-select v-model="form.input_" placeholder="请选择身份类型">
                        <el-option label="求职者" value="1"></el-option>
                        <el-option label="公司" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-dialog title="提示" :visible.sync="loginError" width="30%">
                <span>用户不存在</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="loginError = false">取 消</el-button>
                    <el-button type="primary" @click="loginError = false">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="pswError" width="30%">
                <span>密码错误</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="pswError = false">取 消</el-button>
                    <el-button type="primary" @click="pswError = false">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="registerError" width="30%">
                <span>用户已存在</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="registerError = false">取 消</el-button>
                    <el-button type="primary" @click="registerError = false">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="typeError" width="30%">
                <span>请选择正确的身份登录</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="typeError = false">取 消</el-button>
                    <el-button type="primary" @click="typeError = false">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="registerTrue" width="30%">
                <span>注册成功，请登录</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="admitSubmit">取 消</el-button>
                    <el-button type="primary" @click="admitSubmit">确 定</el-button>
                </span>
            </el-dialog>
            <div class="el-message-button">
                <el-button icon="el-icon-s-promotion" type="primary" class="submit"
                    @click="WantLogin('form')">去登陆</el-button>
                <el-button class="tologin" @click=" Submit('form');">注册</el-button>

            </div>

        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {
    data() {
        return {
            // input_account: '',
            // input_password: '',
            // input_: '',
            form: {
                input_account: '',
                input_password: '',
                input_: '',
            },
            loginError: false,
            registerError: false,
            pswError: false,
            typeError: false,
            status_code: '',
            registerTrue: false,
            rules: {
                input_account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                input_password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                input_: [
                    { required: true, message: '请至少选择一种身份类型', trigger: 'change' }
                ]
            }
        }
    },
    methods: {

        ToPages() {
            if (parseInt(this.$data.form.input_) === 1) {
                this.$router.push('PositionBrowsing')
                this.$store.commit('ChangeIsCompanyToSeeker')
                this.$store.commit('changeAccount', parseInt(this.form.input_account))
            }
            else if (parseInt(this.$data.form.input_) === 2) {
                this.$router.push('CheckResumes')
                this.$store.commit('ChangeIsSeekerToCompany')
                this.$store.commit('changeCompanyAccount', parseInt(this.form.input_account))
            }

        },
        WantLogin(formName) {

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('/user/log',
                        {
                            account: parseInt(this.$data.form.input_account),
                            password: this.$data.form.input_password,
                            statusCode: this.$data.form.input_,
                        }
                    ).then(res => {
                        if (res.data.meg === '用户不存在') {
                            this.loginError = true
                        }
                        else if (res.data.meg === '用户密码错误') {
                            this.pswError = true
                        }
                        else if (res.data.data.statusCode !== parseInt(this.form.input_)) {
                            console.log(this.form.input_);
                            console.log(res.data.data.statusCode);
                            this.typeError = true
                        }
                        else {
                            console.log(res.data.meg);
                            this.ToPages()
                        }


                    })
                        .catch(error => {
                            console.log(error);
                        })
                } else {
                    return false;
                }
            });

        },
        admitSubmit() {
            this.form.input_account = ''
            this.form.input_password = ''
            this.form.input_ = ''
            this.registerTrue = false
        },
        Submit(formName) {
            let input_account = parseInt(this.$data.input_account)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios.post('/user/register',
                        {

                            account: parseInt(this.$data.form.input_account),
                            password: this.$data.form.input_password,
                            statusCode: parseInt(this.$data.form.input_),
                            phone: 18579635589,
                        },
                    )
                        .then(res => {
                            console.log(res);
                            if (res.data.meg === '用户已经存在') {
                                this.registerError = true
                            }
                            else {
                                this.registerTrue = true


                            }
                            // 此处应作出判断，如果用户已存在，那么就提示用户已存在，否则提示用户注册成功
                        })
                        .catch(error => {
                            console.log(error);
                        })
                } else {
                    return false;
                }
            });



        }
    }
}
</script>
<style scoped>
.LoginForm {
    width: 500px;
    height: 500px;
    position: relative;
    margin-left: 500px;
    margin-top: 100px;
    background-color: rgb(227, 243, 246);
    border-radius: 5%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.System_name {
    margin-top: 30px;
    font-size: 20px;
    font-family: "Hiragino Sans GB";
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
    padding-bottom: 20px;
}

.LoginInput {

    margin-top: auto;
}

.el-message-input,
.el-message-select {
    margin-left: 50px;
    margin-top: 30px;
    width: 350px;
}

.el-message-button {
    margin-top: 30px;
}

.submit {
    width: 200px;
}

.tologin {
    width: 100px;
}

.loginerror {
    position: absolute;
    top: 0vh;
    left: 0vw;
}
</style>